<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>收货评价</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="js/rem.js"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
    <script src="js/vue-2.4.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        var flag = 0;

        function getPathParams() {
            var param = 0;
            var path = window.location.href;
            var index = path.lastIndexOf("?");
            if (index != -1) {
                param = path.substring(index + 1);
               var o= param.split(",")
               var param=o[0];
               if(o[1]==2){
                   flag=2;
               }
            }
            return param;
        }

        function saveAssess() {
            var params = {
                all: $("#all").val(),
                happy: $("#happy").val(),
                deliver: $("#deliver").val(),
                serve: $("#serve").val(),
                msg: $("#msg").val(),
                oid: getPathParams()
            }
            $.post("/assess/save", params, function (result) {
                    if (result.state == 1000) {
                        window.location.href = "order.html";
                    }
                }
            )
        }

        $(window).load(function () {

            $(".loading").addClass("loader-chanage");
            $(".loading").fadeOut(300);
            var vm = new Vue({
                el: '#order',
                data: {
                    orders: []
                },
                methods: {},
                created() {
                    var param = {
                        oid: getPathParams()
                    }
                    $.post("/orders/getOrderByOid", param, function (result) {
                        if (result.state == 1000) {
                            vm.orders = result.data;
                            if(flag==2){
                                $.post("/assess/getAccessByOid", param, function (result) {
                                    if (result.msg == true) {
                                        level(result.data.alls);
                                        level1(result.data.happy);
                                        level2(result.data.deliver);
                                        level3(result.data.serve);
                                        $("#msg").val(result.data.msg);
                                        $("#submit").hide();//隐藏div
                                    }
                                })
                            }
                        } else {
                            window.location.href = "order.html";
                        }
                    })


                }

            });
        })
    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<header class="mui-bar mui-bar-nav report-header box-s" id="header">
    <a href="javascript:history.go(-1)"><i class="iconfont icon-fanhui fl"></i></a>
    <p>收货评价</p>
</header>
<div id="order">
    <div id="main" class="mui-clearfix">
        <div class="assess clearfloat">
            <div v-for="item in orders.orderItems" class="top clearfloat box-s">
                <div class="tu fl clearfloat">
                    <img :src="item.image + '1.jpg'"/>
                </div>
                <div class="pinfen fl clearfloat">
                    <p class="tit">{{item.title}}</p>
                </div>
            </div>
            <div class="top clearfloat box-s">
                <p class="ztpinfen">整体评价：</p>
                <div class="assess-right">
                    <img onclick="level(1)" src="img/detail-iocn001.png"/>
                    <img onclick="level(2)" src="img/detail-iocn001.png"/>
                    <img onclick="level(3)" src="img/detail-iocn001.png"/>
                    <img onclick="level(4)" src="img/detail-iocn001.png"/>
                    <img onclick="level(5)" src="img/detail-iocn001.png"/>
                </div>
            </div>
            <textarea id="msg" rows="4" placeholder="请写下对宝贝的感受吧，对他人帮助很大哦"></textarea>
            <input type="hidden" id="serve">
            <input type="hidden" id="happy">
            <input type="hidden" id="deliver">
            <input type="hidden" id="all">
            <div class="bottom clearfloat box-s fl">
                <p class="ztpinfen">整体评分</p>
                <ul>
                    <li>
                        物流速度评价
                    </li>
                    <li class="assess-deliver">
                        <img onclick="level1(1)" src="img/detail-iocn001.png"/>
                        <img onclick="level1(2)" src="img/detail-iocn001.png"/>
                        <img onclick="level1(3)" src="img/detail-iocn001.png"/>
                        <img onclick="level1(4)" src="img/detail-iocn001.png"/>
                        <img onclick="level1(5)" src="img/detail-iocn001.png"/>
                    </li>
                </ul>
                <ul>
                    <li>
                        服务质量评价
                    </li>
                    <li class="assess-serve">
                        <img onclick="level2(1)" src="img/detail-iocn001.png"/>
                        <img onclick="level2(2)" src="img/detail-iocn001.png"/>
                        <img onclick="level2(3)" src="img/detail-iocn001.png"/>
                        <img onclick="level2(4)" src="img/detail-iocn001.png"/>
                        <img onclick="level2(5)" src="img/detail-iocn001.png"/>
                    </li>
                </ul>
                <ul>
                    <li>
                        配送员满意度
                    </li>
                    <li class="assess-happy">
                        <img onclick="level3(1)" src="img/detail-iocn001.png"/>
                        <img onclick="level3(2)" src="img/detail-iocn001.png"/>
                        <img onclick="level3(3)" src="img/detail-iocn001.png"/>
                        <img onclick="level3(4)" src="img/detail-iocn001.png"/>
                        <img onclick="level3(5)" src="img/detail-iocn001.png"/>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="submit"><a href="#" onclick="saveAssess()" class="address-add fl ra3">
    提交
</a></div>

</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/mui.min.js"></script>
<script type="text/javascript" src="js/hmt.js"></script>
<script type="text/javascript">

    function level(s) {
        var str = '';
        var k = 6 - s;
        for (i = 1; i < s + 1; i++) {
            str += "<img onclick='level(" + i + ")' src='img/detail-iocn01.png'/>";
        }
        for (j = 1; j < k; j++) {
            var d = j + s
            str += "<img onclick='level(" + d + ")' src='img/detail-iocn001.png'/>";
        }
        $('.assess-right').html(str);
        $("#all").val(s);
        level1(s);
        level2(s);
        level3(s);

    }


    function level1(s) {
        var str = '';
        var k = 6 - s;
        for (i = 1; i < s + 1; i++) {
            str += "<img onclick='level1(" + i + ")' src='img/detail-iocn01.png'/>";
        }
        for (j = 1; j < k; j++) {
            var d = j + s
            str += "<img onclick='level1(" + d + ")' src='img/detail-iocn001.png'/>";
        }
        $('.assess-deliver').html(str);
        $("#deliver").val(s);
    }

    function level2(s) {

        var str = '';

        var k = 6 - s;
        for (i = 1; i < s + 1; i++) {
            str += "<img onclick='level2(" + i + ")' src='img/detail-iocn01.png'/>";
        }
        for (j = 1; j < k; j++) {
            var d = j + s
            str += "<img onclick='level2(" + d + ")' src='img/detail-iocn001.png'/>";
        }
        $('.assess-serve').html(str);
        $("#serve").val(s);

    }

    function level3(s) {
        var str = '';
        var k = 6 - s;
        for (i = 1; i < s + 1; i++) {
            str += "<img onclick='level3(" + i + ")' src='img/detail-iocn01.png'/>";
        }
        for (j = 1; j < k; j++) {
            var d = j + s
            str += "<img onclick='level3(" + d + ")' src='img/detail-iocn001.png'/>";
        }
        $('.assess-happy').html(str);
        $("#happy").val(s);
    }


</script>
</html>
